<!--
 * @Author: wanglianxin 532445330@qq.com
 * @Date: 2025-02-01 17:03:45
 * @LastEditors: wanglianxin 532445330@qq.com
 * @LastEditTime: 2025-02-03 21:12:37
 * @FilePath: /src/components/Head/index.vue
 * @Description:
-->
<template>
  <div class="head">
    <img :src="props.icon" alt="" />
    <span>{{ props.title }}·王连新</span>
    <van-icon name="wap-nav" style="float: right" @click="showMenu" />
    <van-popup
      v-model:show="showRight"
      position="right"
      class="right-menu"
      :style="{ width: 'calc(100vw - 64px)', height: '100%' }"
    >
      <nav>
        <section v-for="(items, index) in menuList" :key="index">
          <div class="title">
            <h2 class="title-text">{{ items.type }}</h2>
          </div>
          <p
            class="link-text"
            v-for="(item, i) in items.children"
            :key="i"
            @click="view(item)"
          >
            {{ item.type }}
          </p>
        </section>
      </nav>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import list from '@/assets/listData/index.js';
const router = useRouter();
const showRight = ref(false);
function showMenu() {
  showRight.value = true;
}
const menuList = list;
function view(data: Child) {
  if (data.path) {
    router.replace(data.path);
  }
  showRight.value = false;
}
const props = defineProps<{ title: string; icon: string }>();
</script>

<style scoped lang="scss">
.head {
  height: 50px;
  padding: var(--van-search-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 40px;
  }
  ::v-deep {
    .right-menu {
      padding: 0 32px;
      overflow-x: hidden;
      overflow-y: auto;
      nav {
        outline: 0;
        section {
          padding-top: 24px;
        }
        .title {
          padding: 6px 0;
        }
        .title-text {
          line-height: 20px;
          font-size: 13px;
          font-weight: 600;
          color: var(--vt-c-text-1);
          transition: color 0.5s;
        }
        .link-text {
          touch-action: manipulation;
          font-size: 12px;
          padding: 6px 0;

          line-height: 20px;
          font-size: 13px;
          font-weight: 500;
          color: var(--vt-c-text-2);
          transition: color 0.5s;
        }
      }
    }
  }
}
</style>
